<template>
  <div class="w-full h-full flex flex-col overflow-hidden absolute">
    <div class="text-xs flex h-8 bg-white px-3" :class="[needZIndex && 'z-[2020]']">
      <div class="flex items-center" @click="handleShowBottom">
        <span style="font-family: 'DIN-MEDIUM'">{{ isNormalMode ? now : "近三月" }}</span>
        <img :src="getAssetsImageUrl('sj.png')" alt="" class="w-5 h-5" />
      </div>
      <div class="flex items-center ml-3">
        <span>全部账户</span>
        <img :src="getAssetsImageUrl('sj.png')" alt="" class="w-5 h-5" />
      </div>
      <div class="flex-1 flex justify-end items-center" :class="allActive && 'text-blue-400'" @click="handleShowScreen">
        <span style="font-family: 'DIN-MEDIUM'">筛选</span>
        <van-icon :name="getAssetsImageUrl(`${allActive ? 'blue_angle' : 'sj'}.png`)" size="10" />
      </div>
    </div>
    <div class="w-full h-full flex flex-col relative overflow-auto px-3 pt-2">
      <div class="w-full flex flex-col shadow-xl">
        <div
          class="w-full flex flex-col bg-cover bg-center"
          :class="[isMonthMode && !loading ? 'h-32' : 'h-20']"
          :style="{ backgroundImage: `url(${getAssetsImageUrl('mask.png')})` }"
        >
          <div class="w-full h-10 relative flex items-end" v-if="isMonthMode">
            <div class="text-[3.5rem] absolute -top-7 ml-5" style="font-family: 'DIN Alternate', sans-serif">
              {{ currentMonth + 1 }}
            </div>
            <div class="text-lg font-serif ml-13" style="font-family: 'DIN Alternate', sans-serif">月</div>
            <div class="flex-1 flex justify-end items-end">
              <div class="w-14 h-6 rounded-full bg-black text-white flex items-center justify-center p-1 mr-5">
                <img :src="getAssetsImageUrl('chart.jpg')" alt="" class="w-3 h-3" />
                <span class="text-xs ml-1">分析</span>
              </div>
            </div>
          </div>
          <div class="px-5 mt-4 text-xs" v-else>共{{ records.length }}笔交易</div>
          <div class="w-full flex items-center mt-2 px-5">
            <div class="flex-1 flex items-center h-8" v-if="countThreeMonth">
              <span class="text-xs" style="font-family: 'DIN-MEDIUM'">支出</span>
              <div class="text-sm flex items-center ml-1" v-if="!loading" style="font-family: 'DIN-MEDIUM'">
                ¥ {{ threeMonthExpence }}
              </div>
              <van-loading type="spinner" size="12" v-else />
            </div>
            <div class="flex-1 flex items-center h-8" v-else>
              <span class="text-xs" style="font-family: 'DIN-MEDIUM'">支出</span>
              <div class="text-sm flex items-center ml-1" v-if="!loading" style="font-family: 'DIN-MEDIUM'">
                ¥ {{ !isChoseAllIncomes ? expense : "0.00" }}
              </div>
              <van-loading type="spinner" size="12" v-else />
            </div>

            <div class="flex-1 flex items-center h-8 justify-end" v-if="countThreeMonth">
              <span class="text-xs" style="font-family: 'DIN-MEDIUM'">收入</span>
              <div class="text-sm flex items-center ml-1" v-if="!loading" style="font-family: 'DIN-MEDIUM'">
                ¥ {{ threeMonthIncomes }}
                <img :src="getAssetsImageUrl('wenhao.jpeg')" alt="" class="w-4 h-4 ml-.5" />
              </div>
              <van-loading type="spinner" size="12" v-else />
            </div>
            <div class="flex-1 flex items-center h-8 justify-end" v-else>
              <span class="text-xs" style="font-family: 'DIN-MEDIUM'">收入</span>
              <div class="text-sm flex items-center ml-1" v-if="!loading" style="font-family: 'DIN-MEDIUM'">
                ¥ {{ incomes }}
                <img :src="getAssetsImageUrl('wenhao.jpeg')" alt="" class="w-4 h-4 ml-.5" />
              </div>
              <van-loading type="spinner" size="12" v-else />
            </div>
          </div>
          <div class="mt-2 w-full items-center px-5 flex" v-if="isMonthMode && !loading">
            <span class="text-xs mr-2">设置预算</span>
            <van-icon name="arrow" size="0.5rem" />
          </div>
        </div>
        <div class="p-5 w-full flex flex-col" v-if="!loading">
          <div class="flex flex-col" v-for="(item, index) in records" :key="item.id" @click="goDetail(item)">
            <van-swipe-cell>
              <div class="text-xs h-5 w-10 mb-3 rounded-lg flex items-center justify-center bg-gray-100">
                {{ item.dealDate }}
              </div>
              <div class="flex w-full flex-col mb-5">
                <div class="flex w-full font-semibold">
                  <img :src="getAssetsImageUrl(`${item.icon}.png`)" alt="" class="w-5 h-5" />
                  <div class="flex-1 text-sm ml-2">
                    {{ item.icon === "wxzz" ? "转账-" + item.username + "(" + item.card4No + ")" : item.username }}
                  </div>
                  <div class="flex">
                    <span>{{ item.payType === 1 ? "-" : "+" }}</span>
                    <span>¥</span>
                    <span class="ml-1" style="font-family: 'DIN-MEDIUM'">{{ formatPrice(item.money) }}</span>
                  </div>
                </div>
                <div class="flex w-full pl-7 text-xs items-center text-gray-300">
                  <div class="flex-1 flex">储蓄卡{{ item.card4No }} {{ item.dealTime }}</div>
                  <div class="flex-1 flex justify-end">
                    <span>余额:</span>
                    <span>¥</span>
                    <span class="" style="font-family: 'DIN-MEDIUM'">{{ formatPrice(item.note) }}</span>
                  </div>
                </div>
              </div>
              <template #right>
                <div class="flex flex-1 h-full items-end justify-end">
                  <div class="px-3 h-full flex text-sm items-end text-red-400 bg-white" @click="handleDeleteItem(item)">
                    删除
                  </div>
                  <div
                    class="px-3 h-full flex text-sm items-end text-blue-400 bg-white"
                    @click="handleEditItem(item, index)"
                  >
                    编辑
                  </div>
                </div>
              </template>
            </van-swipe-cell>
          </div>
        </div>
      </div>
      <div class="w-full h-32 flex items-center justify-center text-sm text-gray-400" v-if="loading">
        一大波数据正在赶来，请耐心等待
      </div>
      <div class="w-full mt-30"></div>
    </div>
    <div class="fixed bottom-0 right-0 h-13.5 bg-transparent w-full z-70">
      <img :src="getAssetsImageUrl('bottom_bar.png')" alt="" class="w-full h-full" />
      <!-- <div class="relative">
        <div class="absolute w-10 h-19 inset-0 m-auto rounded-full -top-3 bg-white z-30 border border-t-gray-50"></div>
        <div class="absolute w-full h-full bg-white inset-0 m-auto z-40 flex items-center justify-center flex-col">
          <img :src="getAssetsImageUrl('detail.png')" alt="" class="w-10 h-10 absolute -top-3" />
          <div class="text-xs mt-3">明细</div>
        </div>
        <div></div>
      </div>
      <div class="flex items-center justify-start flex-col relative text-gray-400">
        <img :src="getAssetsImageUrl('zb.png')" alt="" class="w-7 h-7" />
        <div class="text-xs">账本</div>
      </div> -->
    </div>
    <van-popup
      v-model:show="showBottom"
      round
      position="bottom"
      color="black"
      :style="{ height: '40%' }"
      @closed="handleClosed"
    >
      <div class="flex-1 pt-5 w-full h-full flex flex-col">
        <div class="flex flex-col">
          <div class="flex flex-col px-5">
            <div class="flex items-center">
              <div class="flex flex-col">
                <div class="w-18 text-center" :class="[isSelectMonth && 'font-bold']" @click="isSelectMonth = true">
                  月份选择
                </div>
                <div class="w-18 h-1 mt-2 rounded-full" :class="[isSelectMonth && 'bg-black ']"></div>
              </div>
              <div class="flex flex-col ml-5">
                <div class="w-18 text-center" :class="[!isSelectMonth && 'font-bold']" @click="isSelectMonth = false">
                  自定义
                </div>
                <div class="w-18 h-1 mt-2 rounded-full" :class="[!isSelectMonth && 'bg-black ']"></div>
              </div>
            </div>
          </div>
          <div class="h-[0.1rem] mt-1 w-full bg-gray-200"></div>
        </div>
        <div class="mt-8">
          <van-date-picker
            v-if="isSelectMonth"
            v-model="currentDate"
            :show-toolbar="false"
            title="选择年月"
            :max-date="new Date()"
            :min-date="minDate"
            :visible-option-num="3"
            :columns-type="columnsType"
          />
          <div class="w-full h-full flex flex-col px-3" v-else>
            <div class="text-sm text-gray-400">交易时间</div>
            <div class="flex w-full h-8 items-center mt-3">
              <div class="w-18 h-6 border rounded-1 border-gray-300 flex items-center justify-center text-xs mr-3">
                上月
              </div>
              <div
                class="w-18 h-6 border rounded-1 border-gray-300 flex items-center justify-center text-xs mr-3"
                @click="handleClick"
              >
                近三月
              </div>
              <div class="w-18 h-6 border rounded-1 border-gray-300 flex items-center justify-center text-xs mr-3">
                近一年
              </div>
            </div>

            <div class="text-sm text-gray-400 mt-4">自定义</div>
            <div class="flex w-full h-8 items-center mt-3 text-xs text-gray-400">
              <div class="w-30 h-6 bg-gray-200 rounded-1 flex items-center justify-center">{{ firstDay }}</div>
              <div class="mx-3">-</div>
              <div class="w-30 h-6 bg-gray-200 rounded-1 flex items-center justify-center">{{ today }}</div>
            </div>
          </div>
        </div>
        <div class="w-full h-12 flex items-center justify-center" :class="[isSelectMonth && 'mt-3']">
          <div
            class="w-[80%] rounded-full h-8 text-sm bg-red-500 flex items-center justify-center text-white mt-5"
            @click="handleChange"
          >
            确认
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="showScreen" round position="bottom" color="black" :style="{ height: '90%' }">
      <div class="w-full h-full flex flex-col">
        <div class="w-full h-56 flex items-center justify-center" v-if="isLoading">
          <van-loading type="spinner" />
        </div>
        <div class="flex-1 w-full h-full flex flex-col overflow-hidden absolute" v-else>
          <div class="flex items-center justify-center text-lg my-3">选择筛选条件</div>
          <div class="w-full h-full relative overflow-auto p-3">
            <div class="flex flex-col">
              <div class="flex items-center text-lg">快捷筛选</div>
              <div class="grid grid-cols-3 gap-5 text-sm mt-3">
                <div
                  class="h-9 leading-9 text-center rounded-1"
                  :class="[allActive ? 'border border-blue-400 bg-blue-100 text-blue-400' : 'bg-gray-100']"
                  @click="handleChoseAll"
                >
                  全部收入
                </div>
                <div class="bg-gray-100 h-9 leading-9 text-center rounded-1">全部支出</div>
                <div class="bg-gray-100 h-9 leading-9 text-center rounded-1">薪酬</div>
                <div class="bg-gray-100 h-9 leading-9 text-center rounded-1">他人转入</div>
                <div class="bg-gray-100 h-9 leading-9 text-center rounded-1">转账给他人</div>
                <div class="bg-gray-100 h-9 leading-9 text-center rounded-1">全部往来</div>
              </div>
            </div>
            <div class="mt-8 flex flex-col">
              <div class="flex items-center text-lg">金额</div>
              <div class="flex items-center mt-3">
                <div class="flex-1 bg-gray-100 flex items-center p-1">
                  <span class="mr-1">¥</span>
                  <span class="text-gray-300 text-sm">最低金额</span>
                </div>
                <div class="mx-3">-</div>
                <div class="flex-1 bg-gray-100 flex items-center p-1">
                  <span class="mr-1">¥</span>
                  <span class="text-gray-300 text-sm">最高金额</span>
                </div>
              </div>
            </div>
            <div class="mt-8 flex flex-col">
              <div class="flex items-center text-lg">
                <div class="flex-1">分类</div>
                <van-icon :name="`arrow-${arrowUp ? 'up' : 'down'}`" @click="handleChangeType" />
              </div>
              <div class="flex w-full h-full flex-col mt-3" v-if="arrowUp">
                <div class="mt-3 text-sm text-gray-400">收入</div>
                <div class="w-full grid grid-cols-3 gap-4 mt-3">
                  <div
                    class="h-8 flex items-center justify-center text-sm rounded-1"
                    :class="[allActive ? 'border border-blue-400 bg-blue-100 text-blue-400' : 'bg-gray-100']"
                    @click="handleChoseAll"
                  >
                    全部收入
                  </div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">退款</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">他人转入</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">借款</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">投资收益</div>
                </div>
              </div>
              <div class="flex w-full h-full flex-col mt-3 mb-15" v-if="arrowUp">
                <div class="mt-3 text-sm text-gray-400">支出</div>
                <div class="w-full grid grid-cols-3 gap-4 mt-3">
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">全部支出</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">购物</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">出行</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">转账给他人</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">餐饮</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">充值缴费</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">还款</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">其他支出</div>
                  <div class="flex items-center justify-center h-8 bg-gray-100 text-sm rounded-1">生活日用</div>
                </div>
              </div>
            </div>
          </div>
          <div class="fixed bottom-0 h-16 border bg-white border-t-gray-50 w-full flex">
            <div class="flex-1 flex items-center px-5">
              <div class="flex-1 flex justify-start">
                <div class="text-lg w-24 h-14 flex items-center">重置</div>
              </div>
              <div class="flex-1 flex justify-end">
                <div
                  class="text-lg w-20 h-8 rounded-full border-dark-500 border flex items-center justify-center"
                  @click="handleFinish"
                >
                  完成
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model:show="showEdit" position="bottom" :style="{ height: '50%' }">
      <div class="w-full h-full overflow-hidden absolute">
        <div class="p-3 flex items-center fixed w-full">
          <div class="flex-1 flex"><van-button plain type="default" @click="showEdit = false">取消</van-button></div>
          <div class="flex-1 flex justify-end">
            <van-button plain type="success" @click="handleEnter">确认</van-button>
          </div>
        </div>
        <div class="w-full h-20"></div>
        <div class="w-full h-[600px] relative overflow-auto">
          <van-cell-group inset>
            <van-field v-model="username" label="姓名" />
            <van-field v-model="card" label="交易卡号" />
            <div class="px-4 flex items-center mt-2" @click="handleShowDate">
              <div class="text-[0.95rem] text-dark-300">交易日期</div>
              <div class="flex-1 ml-8 h-5">{{ dealDate }}</div>
            </div>
            <van-divider />
            <div class="px-4 flex items-center mt-2" @click="handleShowTime">
              <div class="text-[0.95rem] text-dark-300">交易时间</div>
              <div class="flex-1 ml-8 h-5">{{ dealTime }}</div>
            </div>
            <van-divider />
            <van-field v-model="bank" label="付款银⾏" />
            <van-field v-model="payAccount" label="付款账号" />
            <div class="px-5 mt-3 text-sm">
              <van-radio-group v-model="payType" direction="horizontal">
                <van-radio :name="1">支出</van-radio>
                <van-radio :name="2">收入</van-radio>
              </van-radio-group>
            </div>

            <van-field v-model="money" type="number" label="交易金额" />
            <van-field v-model="bz" label="转账附言" />
            <div class="font-bold text-sm px-3 mt-3">图标：</div>
            <div class="grid grid-cols-3 gap-4 w-full h-auto mt-5 mb-20">
              <div
                class="w-ful flex justify-center"
                v-for="(item, index) in icons"
                :key="(item.icon as string)"
                @click="handleChangeActive(index, item)"
              >
                <div class="flex items-center border w-16 p-1 h-7 rounded-full" :class="[item.active && 'bg-gray-200']">
                  <img :src="getAssetsImageUrl(`${item.icon}.png`)" alt="" class="w-6 h-6" />
                  <div class="text-sm font-bold">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </van-cell-group>
        </div>
      </div>
      <van-dialog v-model:show="show" title="请选择" show-cancel-button>
        <van-date-picker
          v-model="currentDateEdit"
          :show-toolbar="false"
          :columns-type="columnsTypeEdit"
          title="选择日期"
          v-if="isDate"
        />
        <van-time-picker v-model="currentTimeEdit" :show-toolbar="false" title="选择时间" v-else />
      </van-dialog>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
  import dayjs from "dayjs";
  import { RecordItem, useUserStore } from "/@/store/modules/user";
  import { DatePickerColumnType } from "vant";
  import { useRouter } from "vue-router";
  import { formatPrice } from "/@/utils/util";
  const userStore = useUserStore();
  const router = useRouter();
  const now = dayjs().format("YYYY.MM");
  const records = computed(() =>
    allActive.value
      ? userStore.getIncomesRecords
      : countThreeMonth.value
      ? userStore.getThreeMonthsRecords
      : userStore.getRecords,
  );
  const columnsType = ref<DatePickerColumnType[]>(["year", "month"]);
  const expense = computed(() => formatPrice(userStore.getExpense));
  const incomes = computed(() => formatPrice(userStore.getIncomes));
  const currentMonth = dayjs().month();
  const showBottom = ref<boolean>(false);
  const showScreen = ref<boolean>(false);
  const minDate = new Date(2022, 0, 1);
  const currentDate = ref<Array<string>>([new Date().getFullYear().toString(), (currentMonth + 1).toString()]);
  const isSelectMonth = ref<boolean>(true);
  const isNormalMode = ref<boolean>(true);
  const countThreeMonth = ref<boolean>(false);
  const needZIndex = computed(() => userStore.getNeedZIndex);
  const arrowUp = ref<boolean>(true);
  const isLoading = ref<boolean>(false);
  const allActive = ref<boolean>(false);
  const loading = ref<boolean>(false);
  const showEdit = ref<boolean>(false);
  const show = ref<boolean>(false);
  const isDate = ref<boolean>(true);
  const username = ref<string>("");
  const card = ref<string>("");
  const bank = ref<string>("");
  const payAccount = ref<string>("");
  const money = ref<number>();
  const bz = ref<string>("");
  const currentDateEdit = ref<Array<string>>([]);
  const currentTimeEdit = ref<Array<string>>([]);
  const currentIcon = ref<string>("cy");
  const columnsTypeEdit = ref<DatePickerColumnType[]>(["month", "day"]);
  const payType = ref<number>(1);
  const itemId = ref<number>();
  const editItem = ref<RecordItem>();
  const currentIndex = ref<number>();
  const isChoseAllIncomes = ref<boolean>(false);
  const isMonthMode = ref<boolean>(true);
  const threeMonthExpence = computed(() => userStore.getThreeMonthExpence);
  const threeMonthIncomes = computed(() => userStore.getThreeMonthIncomes);

  const firstDay = dayjs().startOf("month").format("YYYY年MM月DD日").toString();
  const today = dayjs().format("YYYY年MM月DD日").toString();
  const dealDate = computed(() => {
    if (currentDateEdit.value.length !== 2) {
      return "";
    } else {
      return currentDateEdit.value[0] + "-" + currentDateEdit.value[1];
    }
  });
  const dealTime = computed(() => {
    if (currentTimeEdit.value.length !== 2) {
      return "";
    } else {
      return currentTimeEdit.value[0] + ":" + currentTimeEdit.value[1];
    }
  });
  const icons = computed(() => userStore.getIcons);

  onMounted(async () => {
    await nextTick();
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  });
  function handleChangeActive(index: number, item: Record<any, string | number | boolean>) {
    userStore.changeIconActive(index);
    currentIcon.value = item.icon as string;
  }

  function handleShowDate() {
    show.value = true;
    isDate.value = true;
  }
  function handleShowTime() {
    show.value = true;
    isDate.value = false;
  }
  const finallyMoney = computed(() => userStore.getBalance);
  function handleEnter() {
    const trueDate = new Date().getFullYear().toString() + "-" + dealDate.value;
    let dateStr = "";
    if (trueDate === dayjs().format("YYYY-MM-DD")) {
      dateStr = "今天";
    } else if (trueDate === dayjs().subtract(1, "day").format("YYYY-MM-DD")) {
      dateStr = "昨天";
    } else {
      dateStr = dealDate.value;
    }

    userStore.setBalanceForEdit(editItem.value!.payType!, editItem.value!.money!);
    userStore.setBalance(payType.value, Number(money.value));
    const item: RecordItem = {
      id: editItem.value!.id,
      username: username.value,
      card: card.value,
      dealDate: dateStr,
      dealTime: dealTime.value,
      bank: bank.value,
      payAccount: payAccount.value,
      money: money.value,
      icon: currentIcon.value,
      payType: payType.value,
      note: finallyMoney.value,
      card4No: card.value.slice(-4),
      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss").toString(),
      bz: bz.value,
      currentDate: currentDateEdit.value,
      currentTime: currentTimeEdit.value,
    };
    if (editItem.value?.payType === 1) {
      userStore.setIncomesForEdit(editItem.value!.money!);
    } else {
      userStore.setIncomesForEdit(editItem.value!.money!);
    }
    userStore.updateRecordItem(item, currentIndex.value!);
    showEdit.value = false;
  }

  function handleFinish() {
    showScreen.value = false;
    isMonthMode.value = false;
    userStore.filterRecords();
  }

  function handleDeleteItem(item) {
    userStore.deleteItemOfRecord(item);
  }

  function handleChangeType() {
    arrowUp.value = !arrowUp.value;
  }

  function handleChoseAll() {
    allActive.value = !allActive.value;
    isChoseAllIncomes.value = !isChoseAllIncomes.value;
    countThreeMonth.value = false;
  }

  function handleClick() {
    countThreeMonth.value = true;
    isNormalMode.value = false;
    showBottom.value = false;
    userStore.setNeedZIndex(false);
    isMonthMode.value = false;
    userStore.filterThreeMonthRecords();
  }
  function handleChange() {
    console.log(isSelectMonth.value);
    if (isSelectMonth.value) {
      countThreeMonth.value = false;
      isNormalMode.value = true;
    }

    isChoseAllIncomes.value = false;
    showBottom.value = false;
    userStore.setNeedZIndex(false);
    isMonthMode.value = isSelectMonth.value;
    allActive.value = false;
    console.log(records.value);
  }
  function handleShowBottom() {
    showBottom.value = true;
    userStore.setNeedZIndex(true);
  }
  function handleClosed() {
    userStore.setNeedZIndex(false);
  }
  function handleShowScreen() {
    showScreen.value = true;
    isLoading.value = true;
    setTimeout(() => {
      isLoading.value = false;
    }, 1000);
  }
  function goDetail(item: RecordItem) {
    userStore.setCurrentRecordItem(item);
    router.push("/records/detail");
  }

  function handleEditItem(item: RecordItem, index: number) {
    currentIndex.value = index;
    showEdit.value = true;
    editItem.value = { ...item };
    itemId.value = item.id!;
    username.value = item.username!;
    card.value = item.card!;
    bank.value = item.bank!;
    currentDateEdit.value = item.currentDate!;
    currentTimeEdit.value = item.currentTime!;
    payAccount.value = item.payAccount!;
    payType.value = item.payType!;
    money.value = item.money!;
    bz.value = item.bz!;
    userStore.changIconActiveForName(item.icon!);
  }
</script>
